import Head from 'next/head'
import Image from 'next/image'
import { InferGetStaticPropsType } from 'next'

import { postDetail, postContent } from '@/api/post'
import vercel from '@/public/vercel.svg'
import { markdown as md, day, formatNum } from '@/util'

import { ShowCreativeImg, ShowVipImg } from '@/components/icon'

export default function Home({
  data,
  comment
}: InferGetStaticPropsType<typeof getServerSideProps>) {
  const res = md.render(data?.article_info.mark_content)
  return (
    <>
      <Head>
        <title>{data?.article_info.title} - 掘金</title>
        <meta name='description' content={data?.article_info.brief_content} />
        <meta
          name='viewport'
          content='width=device-width, initial-scale=1, user-scalable=no, viewport-fit=cover'
        />
        <link rel='icon' href='/favicon.ico' />
      </Head>

      <main className=' bg-slate-100 min-h-screen text-black'>
        <header></header>
        <article className='max-w-screen-md mx-auto'>
          <div className='bg-white p-6'>
            <h1 className='text-3xl mb-5'>
              <strong>{data?.article_info.title}</strong>
            </h1>
            <div className='user mb-5 flex justify-between items-center'>
              <div className='flex items-center'>
                {
                  <Image
                    className='rounded-full mr-4 object-cover'
                    loader={() =>
                      `${data?.author_user_info.avatar_large}?w=50&q=75`
                    }
                    alt={data?.author_user_info.user_name}
                    src={vercel}
                    width={40}
                    height={40}
                  />
                }
                <div>
                  <div className='top'>
                    <span className='text-sm'>
                      {data?.author_user_info.user_name}
                    </span>
                    <ShowCreativeImg
                      level={
                        data?.author_user_info?.user_growth_info.jpower_level
                      }
                    />
                    <ShowVipImg
                      level={
                        data?.author_user_info?.user_growth_info?.vip_level
                      }
                    />
                  </div>
                  <div className='btm text-stone-400 text-xs'>
                    <span>
                      {day(data?.article_info.ctime * 1000).format(
                        'YYYY年MM月DD日 HH:mm'
                      )}
                    </span>
                    <span className='px-1'>·</span>
                    <span>阅读 {formatNum(data?.article_info.view_count)}</span>
                  </div>
                </div>
              </div>
              <div className='right'>
                <button className='py-1 px-3 flex-1 border border-blue-400 text-blue-400 bg-blue-50 rounded'>
                  + 关注
                </button>
              </div>
            </div>
            {data?.article_info.cover_image && (
              <Image
                className='w-full object-cover'
                loader={() => `${data?.article_info.cover_image}?q=75`}
                alt={data?.article_info.title}
                src={vercel}
              />
            )}
            <div className='prose prose-indigo max-w-full'>
              {true && <div dangerouslySetInnerHTML={{ __html: res }}></div>}
            </div>
          </div>
          <section className='mt-4 bg-white p-6'>
            <h2 className='mb-6'>
              <strong>评论</strong>
            </h2>
            <div className='user flex h-16'>
              <Image
                className='rounded-full w-12 h-12 object-cover mr-4 flex-shrink-0'
                loader={() => `${data?.author_user_info.avatar_large}?q=75`}
                alt={data?.article_info.title}
                src={vercel}
              />
              <div className='flex-1 rounded-md flex justify-center items-center bg-stone-200'>
                <span>看完啦，</span>
                <span className='px-0.5 text-blue-500 cursor-pointer'>
                  登录
                </span>
                <span>分享一下感受吧～</span>
              </div>
            </div>
            <div className='pt-8 pb-4'>
              <h2 className='mb-6'>
                <strong>全部评论</strong>
              </h2>
              {comment?.map((item, index) => (
                <div className='' key={index}>
                  {(item as any).comment_id}
                </div>
              ))}
            </div>
          </section>
        </article>
      </main>
    </>
  )
}

/**
 * （静态生成）：指定基于数据预呈现页面的动态路由。
 */
// export async function getStaticPaths():GetStaticPaths {
//   const list = await (await fetch('http://localhost:5000/list')).json()

//   return {
//     props: {
//       list
//     }
//   }
// }

/**
 * （静态生成）：在构建时获取数据。
 */
// export async function getStaticProps() {
//   // 调用外部 API 获取博文列表
//   const list: any[] = await (await fetch('http://localhost:5000/list')).json()

//   // 通过返回 { props: { posts } } 对象，Blog 组件
//   // 在构建时将接收到 `posts` 参数
//   return {
//     props: {
//       list
//     }
//   }
// }

/**
 * （Server-side Rendering）：获取每个请求的数据。
 */
export async function getServerSideProps({
  params
}: Record<string, Record<string, string>>) {
  // const data = await postDetail('7088920558598881293')
  const res = await Promise.all([postDetail(params.id), postContent(params.id)])
  console.log('id =>  ', res[1])

  // Pass data to the page via props
  return { props: { data: res[0], comment: res[1] } }
}
